<!DOCTYPE html>
<html>
<head>
	<title>spaCy NER Annotator</title>
	<link rel="shortcut icon" href="assets/img/60403.png" />
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/css/font-awesome.min.css">
	<script src="assets/js/jquery-3.3.1.slim.min.js"></script>
	<script src="assets/js/popper.min.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<style type="text/css">
		.header{
			width: 100%;
			text-align: center;
		}
		.content,.entity{
			padding-left: 10%;
		}
		.classes{
			border: 1px solid;
			height: 335px;
			overflow-y: auto;
		}
		.pdn{
			padding: 2px 0px;
		}
		.class{
			height: 45px;
    		display: table;
    		padding: 10px 35px;
    		background-color: lightskyblue;
    		border: 1px solid;
    		cursor: pointer;
		}
		.class span{
			vertical-align: middle;
			display: table-cell;
		}
		.entot{
			width: 100%;
			height: 150px;
			border: 1px solid;
			background-color: #444;
			overflow-y: auto;
		}
		.entdiv{
						
		}
		.ctrtext{
			padding: 0px 70px;
		}
		.ctrbtn{
			text-align: center;
		}
		.pull-right{
			float: right;
		}
		#editor {
		    width: 100%;
		    height: 200px;
		    padding: 10px;
		    background-color: #444;
		    color: white;
		    font-size: 14px;
		    font-family: monospace;
		    overflow-y: auto;
		}
		.next-content{
			text-align: center;
			padding-top: 10px;
		}

		.entityval{
			float: left;
    		padding: 4px 4px;
    		color: white;
		    font-size: 14px;
		    font-family: monospace;
		}
		.entityval div{
			cursor: pointer;
		}
		.delete_btn{
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}
		.note{
			text-align: center;
			padding-top: 12px;
			-webkit-animation:colorchange 20s infinite alternate;
		}

	    @-webkit-keyframes colorchange {
	      0% {
	        
	        color: blue;
	      }
	      
	      10% {
	        
	        color: red;
	      }
	      
	      20% {
	        
	        color: #1abc9c;
	      }
	      
	      30% {
	        
	        color: #d35400;
	      }
	      
	      40% {
	        
	        color: blue;
	      }
	      
	      50% {
	        
	        color: #34495e;
	      }
	      
	      60% {
	        
	        color: blue;
	      }
	      
	      70% {
	        
	        color: #2980b9;
	      }
	      80% {
	     
	        color: darkred;
	      }
	      
	      90% {
	     
	        color: #2980b9;
	      }
	      
	      100% {
	        
	        color: pink;
	      }
	    }
	    #fileUpload{
	    	display: none;
	    }
	</style>
</head>
<body>
	<div class="col-12">
		<div class="row">
			<div class="header">
				<h2>spaCy NER Annotator</h2>
			</div>
		</div>
	</div>
	<div class="col-12">
		<div class="row">
			<div class="col-8">
				<div class="row content">
					<div class="col-3" style="padding: 0px;"><h4>Content</h4></div>
					<div class="col-6 note"> <span>Please save it, Once pasted or typed</span> </div>
					<div class="col-3">
						<button type="button" class="btn btn-primary btn-sm pull-right" id="save">Save</button>
						<button type="button" class="btn btn-primary btn-sm pull-right" id="edit">Edit</button>
					</div>
					
					
					<div id="editor" contenteditable="true" onpaste="myFunction()"></div>
				</div>
				<div class="row entity">
					<div class="col-12">
						<div class="row">
							<div class="col-6"><h4>Output</h4></div>
							<div class="col-6">
								<div class="pull-right note"><span>Double click on text to delete</span></div>
							</div>
						</div>
						<div class="row">
							<div class="entot" id="entity">
								<!-- <div class="entityval"><div>March 8, 1992</div></div>
								<div class="entityval"><div>Manivanann</div></div> -->
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-4">
				<div class="entdiv">
					<div class="clstitle">
						<h4>Class Names</h4>
					</div>
					<div class="col-12 classes">
						<div class="addclass">
							<div class="ctrtext">
								<input class="form-control" type="text" placeholder="Add Class">
							</div>
							<div class="ctrbtn">
								<button type="button" class="btn btn-primary btn-sm" id="addclass">Add</button>
							</div>
						</div>
						<!-- <div class="pdn"><button class="class"><span>DOB</span></button></div>
						<div class="pdn"><button class="class"><span>Name</span></button></div>
						<div class="pdn"><button class="class"><span>Experience</span></button></div> -->
					</div>
					<div class="next-content">
						<button type="button" id="skip" class="btn btn-secondary">Skip</button>
						<button type="button" id="next" class="btn btn-secondary">Next Content</button>
						<button type="button" id="complete" class="btn btn-secondary">Complete</button>
					</div>
					
				</div>
			</div>
		</div>
	</div>
	<!-- <div class="col-12">
		<div class="container">
			<gcse:search></gcse:search>
		</div>
	</div> -->

	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title" id="exampleModalLabel">File Upload</h5>
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	          <span aria-hidden="true">&times;</span>
	        </button>
	      </div>
	      <div class="modal-body">
	        <form class="was-validated">
	        	<div class="custom-file">
				    <input type="file" class="custom-file-input" id="validatedCustomFile" onchange="getFilename(this)" accept=".txt" required>
				    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
				    <div class="invalid-feedback">Please upload your training dataset(filename.txt)</div>
				</div>
	        </form>
	      </div>
	      <div class="modal-footer">
	        <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
	        <button type="button" class="btn btn-primary" data-dismiss="modal" id="upload">Upload</button>
	      </div>
	    </div>
	  </div>
	</div>
	<button type="button" class="btn btn-primary" id="fileUpload" data-toggle="modal" data-target="#exampleModal">
	  Launch demo modal
	</button>

	<script src="assets/js/project.js"></script>
</body>
</html>